<template>
<div class="headWrap">
  <div class="backBtn">
    <span class="iconfont icon-back"></span>
  </div>
  <div class="searchBox">
    <span class="iconfont icon-search"></span>
    <input type="text" placeholder="请输入城市或景点">
  </div>
  <div class="city">
    <span>{{this.city}}</span>
    <span class="iconfont icon-moreunfold"></span>
  </div>
</div>
</template>
<script>
export default {
  name: 'homeHeader',
  props: {
    city: String
  }
}
</script>
<style lang="scss" scoped>
@import '~styleSrc/base';
.headWrap{
  background: $color-primary;
  height: 1rem;
  display: flex;
  color: $font-white;
  .backBtn{
    float: left;
    width: .8rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    .icon-back{
      font-size: .4rem;
    }
  }
  .city{
    float: right;
    width: 1.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
  }
  .searchBox{
    flex:1;
    height: .7rem;
    line-height: .7rem;
    background: #fff;
    margin-top: .15rem;
    .icon-search{
      color: #999;
      float: left;
      width: 12%;
      text-align: center;
    }
    input{
      border: 0;
      color: #666;
      width: 88%;
      box-sizing: border-box;
      height: .7rem;
      line-height: .7rem;
      display: block;
      float: left;
      &::-webkit-input-placeholder{
        color: #999;
      }
    }
  }
}
</style>
